<script setup lang="ts">
import { reactive, watch, ref } from "vue";
import { message } from "@/utils/message";
import { isAllEmpty, deviceDetection } from "@pureadmin/utils";
import type { FormInstance, FormRules } from "element-plus";
import { zxcvbn } from "@zxcvbn-ts/core";
import { changePwd } from "@/api/user";

defineOptions({
  name: "EditPassword"
});

const userInfos = reactive({
  passwordOld: "",
  passwordNew: "",
  againPassword: ""
});

const userInfoFormRef = ref<FormInstance>();

var rules = reactive<FormRules>({
  passwordOld: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  passwordNew: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  againPassword: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入确认密码"));
        } else if (userInfos.passwordNew !== value) {
          console.log(userInfos.passwordNew);
          callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});

const pwdProgress = [
  { color: "#e74242", text: "非常弱" },
  { color: "#EFBD47", text: "弱" },
  { color: "#ffa500", text: "一般" },
  { color: "#1bbf1b", text: "强" },
  { color: "#008000", text: "非常强" }
];

watch(
  userInfos,
  ({ passwordNew }) =>
    (curScore.value = isAllEmpty(passwordNew) ? -1 : zxcvbn(passwordNew).score)
);

const curScore = ref();

// 更新信息
const onSubmit = async (formEl: FormInstance) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(userInfos);
      let result = await changePwd(userInfos);
      if (result.success) message("更新信息成功", { type: "success" });
      else message(result.Message, { type: "error" });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<template>
  <div
    :class="[
      'min-w-[180px]',
      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
    ]"
  >
    <h3 class="my-8">个人信息</h3>
    <el-form
      ref="userInfoFormRef"
      label-position="top"
      :rules="rules"
      :model="userInfos"
    >
      <el-form-item label="旧密码" prop="passwordOld">
        <el-input
          v-model="userInfos.passwordOld"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="passwordNew">
        <el-input
          v-model="userInfos.passwordNew"
          placeholder="请输入新密码"
          show-password
        />
      </el-form-item>
      <div class="mt-4 flex">
        <div
          v-for="(item, index) in pwdProgress"
          :key="index"
          class="w-[19vw]"
          :style="index !== 0 ? 'marginLeft:4px' : ''"
        >
          <el-Progress
            striped
            striped-flow
            :duration="curScore === index ? 6 : 0"
            :percentage="curScore >= index ? 100 : 0"
            :color="item.color"
            :stroke-width="10"
            :show-text="false"
          />
          <p class="text-center" :style="curScore === index ? item.color : ''">
            {{ item.text }}
          </p>
        </div>
      </div>
      <el-form-item label="确认密码" prop="againPassword">
        <el-input
          v-model="userInfos.againPassword"
          placeholder="请输入确认密码"
          show-password
        />
      </el-form-item>
      <el-button type="primary" @click="onSubmit(userInfoFormRef)">
        更新密码
      </el-button>
    </el-form>
  </div>
</template>
